<form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('contect_name')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-contect_name" readonly data-rule="required"  class="form-control " name="row[contect_name]" type="text" value="{$row.contect_name|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('contect_phone')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-contect_phone" readonly data-rule="required" class="form-control " name="row[contect_phone]" type="text" value="{$row.contect_phone|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('patient_name')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-patient_name" readonly data-rule="required" class="form-control" name="row[patient_name]" type="text" value="{$row.patient_name|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('patient_sex')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-patient_sex" readonly data-rule="required" class="form-control" name="row[patient_sex]" type="text" value="{$row.patient_sex|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('patient_age')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-patient_age" readonly data-rule="required"  class="form-control " name="row[patient_age]" type="text" value="{$row.patient_age|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('medical_history')}:</label>
        <div class="col-xs-12 col-sm-8">

            <textarea id="c-medical_history" readonly data-rule="required" class="form-control " rows="5" name="row[medical_history]" cols="50">{$row.medical_history|htmlentities}</textarea>

        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('diagnosis')}:</label>
        <div class="col-xs-12 col-sm-8">

            <textarea id="c-diagnosis"  data-rule="required" class="form-control " rows="5" name="row[diagnosis]" cols="50">{$row.diagnosis|htmlentities}</textarea>

        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('treatment')}:</label>
        <div class="col-xs-12 col-sm-8">

            <textarea id="c-treatment"  data-rule="required" class="form-control " rows="5" name="row[treatment]" cols="50">{$row.treatment|htmlentities}</textarea>

        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('follow_up_advice')}:</label>
        <div class="col-xs-12 col-sm-8">

            <textarea id="c-follow_up_advice"  data-rule="required" class="form-control " rows="5" name="row[follow_up_advice]" cols="50">{$row.follow_up_advice|htmlentities}</textarea>

        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('attachments')}:</label>
        <div class="col-xs-12 col-sm-8">
            {notempty name="row.attachments"}
            {volist name="row.attachments" id="vo1" }
            <image src="{$vo1}" width="100px"  class="thumbnail" onclick="previewImage(`{$vo1}`)" >
            {/volist}
                {/notempty}
        </div>
    </div>
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-primary btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>
<style>
        .preview-container {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.8);
            z-index: 1000;
            text-align: center;
        }
        .preview-image {
            max-width: 90%;
            max-height: 90%;
            margin-top: 5%;
        }
        .thumbnail {
            cursor: pointer;
            width: 200px;
            height: auto;
            margin: 10px;
        }
    </style>
 <!-- 预览容器 -->
    <div id="previewContainer" class="preview-container" onclick="closePreview()">
        <img id="previewImage" class="preview-image" src="">
    </div>

    <script>
        function previewImage(src) {
            document.getElementById('previewImage').src = src;
            document.getElementById('previewContainer').style.display = 'block';
        }

        function closePreview() {
            document.getElementById('previewContainer').style.display = 'none';
        }
    </script>
